<!DOCTYPE html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="format-detection" content="telephone=no" />
        <style>
            html,body{
                margin:0;
                padding:0;
                min-height:100vh;
            }
            p{
                margin:0;
                padding:0;
            }
            .full{
                width:100%;
                display: block;
            }

            .fl{
                float: left;
            }
            .fr{
                float: right;
            }
            .head{
                position: relative;
                border-bottom:1px solid rgb(215,215,215);
                margin:auto;
                padding:15px 5%;
                overflow: hidden;
            }

            .head a{
                width:30vw;
                height:100%;
                position: absolute;
                top:0;
                right:0;
            }


            .foot{
                position: fixed;
                bottom:0;
                width:100%;
                /*height:50px;*/
                background:white;
                left:0;
                overflow: hidden;
                /*border-top:1px solid rgb(215,215,215);*/

            }
            
            .foot .total{
                width:10vw;
                display: inline-block;
                float: right;
                margin-top:5px;
                margin-bottom: 5px;
                margin-right:15px;
            }
            
            .foot .total span,.foot .total img{
                display: block;
                height:25px;
                margin:auto;
                text-align: center;
                text-align: center;
                line-height: 25px;
                color:#F39800;
            }


            .foot .total-comment{
                    
            }

            .content-title{
                font-size:1.2rem;
                margin:15px 0;
            }
            .content{
                margin-left:4vw;
                margin-right:4vw;
            }

            .content .content-title span{
                margin-left:15px;
                color:#666;
            }



            .content .content-other{
                height:35px;
            }

            .content .content-other span{
                display: inline-block;
                float: left;
                height:100%;
            }

            .content .content-other .readerImg img{
                vertical-align: middle;
                border-radius: 3px;
            }

            .content .content-other .readerName{
                margin-left:15px;
                margin-right:15px;
                font-size:1.1rem;
                line-height:35px;
            }

            .content .content-other .logo img{
                vertical-align: middle;
                height:70%;
                margin-top:20%;
            }

            .content .content-other .viewes{
                float: right;
                color:#666;
                line-height:35px;
            }

            .content .content-other img{
                max-height:100%;
            }




            .content .audio-box{
                width:60vw;
                height:60vw;
                margin:auto;
                margin-top:20px;
                border:3vw solid rgba(242,150,0,.7);
                border-radius: 50%;
                overflow: hidden;
                position: relative;
            }

            .content .audio-box .big{
                width:100%;
                display: block;
            }

            .content .audio-box .small{
                position: absolute;
                width:16vw;
                top:22vw;
                left:22vw;
            }


            .text{
                color: rgb(78,78,78);
                padding:20px 0;
                line-height:1.5;
            }
            audio{
                display: none;
            }


            @keyframes begin{
                from{
                    transform:rotate(0deg);
                    -ms-transform:rotate(0deg); 	/* IE 9 */
                    -moz-transform:rotate(0deg); 	/* Firefox */
                    -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
                    -o-transform:rotate(0deg); 	/* Opera */
                }
                to{
                    transform:rotate(360deg);
                    -ms-transform:rotate(360deg); 	/* IE 9 */
                    -moz-transform:rotate(360deg); 	/* Firefox */
                    -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
                    -o-transform:rotate(360deg); 	/* Opera */
                }
            }

            .open-music{
                -webkit-animation:begin 8s infinite linear ;
            }

            .open-music .small{
                display: none !important;
            }

            .comment{
                border-top:1px solid rgb(215,215,215);

            }

            .comment .comment-title{
                margin-top:20px;
                height:25px;
                line-height:25px;
                vertical-align: middle;
                padding-left:4vw;
                padding-right:4vw;
            }
            .comment .comment-title img{
                height:100%;
                width:auto;
                float: left;
                margin-right:5px;
            }
            .comment .comment-title span{
                height:100%;
                display: inline-block;
                float: left;
            }

            .comment-list{
                display: flex;
                padding:15px 4vw;
                border-bottom:1px solid rgb(215,215,215);
            }

            .comment-list .head-img{
                width:10vw;
            }
            
            .comment-list .head-img p{
                width:10vw;
                height:10vw;
                background-size: cover;
                background-position: center;
                border-radius: 50%;
                
            }

            .comment-info{
                flex: 1;
                margin-left:20px;
            }

            .comment-info .user-name{
                color: #F39800;
            }

            .comment-info .time-info{
                color:#999;
                font-size:0.9rem;
                line-height:1.6rem;
            }
            .comment-info .comment-content{
                color:rgb(78,78,78);
            }

            .add-comment-page{
                display: none;
                position: fixed;
                top:0;
                left:0;
                height:100vh;
                width:100vw;
                background: #fff;
            }
        
            .add-comment-page .framework{
                width:90%;
                margin:auto;
            }
            
            .add-comment-page .add-comment-title{
                height:25px;
                margin-top:15px;
                margin-bottom:15px;
            }
            .add-comment-page .add-comment-title span,
            .add-comment-page .add-comment-title img{
                height:100%;
                display: inline-block;
                line-height: 25px;
                float: left;
                margin-right:5px;
            }
    
            .add-comment-page .nickname{
                height:30px;
                border-radius: 2px;
                margin-top:10px;
            }


            .add-comment-page textarea,
            .add-comment-page .nickname{
                display: block;
                -webkit-appearance: none;
                border:1px solid rgb(215,215,215);
                font-size:1rem;
                color:rgb(78,78,78);
                width:100%;
                padding-left:0;
                padding-right:0;
                text-indent: 10px;
            }

            .add-comment-page .btn{
                text-align: center;
                margin-top:30px;
            }


            .add-comment-page .btn span{
                width:40%;
                line-height:2.5rem;
                text-align: center;
                border:1px solid rgb(215,215,215);
                display: inline-block;
                margin:5%;
                box-sizing:border-box;
                -webkit-box-sizing:border-box;
                float: left;
                color:#fff;
            }

            .add-comment-page .btn span.cancel{
                background:#aaa;
            }
    
            .add-comment-page .btn span.sure{
                background:#F39800;

            }
        </style>
    </head>
    <body>
    <div class="head">
        <img  class="full" src="{{asset('images/sharepage/share-top.png')}}">
        <a href="{{asset('downloadpage.html')}}"></a>
    </div>


    <div class="content">
        <p class="content-title">{{$audioInfo->AudioTitle}}<span>{{substr($audioInfo->PublishDate,0,10)}}</span></p>

        <div class="content-other">
            <span class="readerImg"><img src="{{asset('images/sharepage/bg.png')}}" ></span>
            <span class="readerName">侯志奎</span>
            <span class="logo"><img src="{{asset('images/sharepage/logo.png')}}" ></span>
            <span class="viewes">播放:{{$audioInfo->view_times}}次</span>
        </div>

        <audio src="{{$audioInfo->FilePath1}}" id="audio"></audio>

        <div class="audio-box">
            <img class="big" src="{{asset('images/sharepage/bg.png')}}" onclick="close_music()">
            <img class="small" src="{{asset('images/sharepage/close-btn.png')}}" onclick="open_music()">
        </div>

        <p class="text">教导读书会是由国内著名人本管理专家侯志奎导师，经过十多年的潜心研究所创立的一套实效管理模式和企业自学习社群。在“教导型组织”理论体系的支撑下，通过“读书、读人、读事”再造组织学习的基因，启迪员工的智慧，关注团队的成长，以共同的价值观为基础，重新定义企业管理模式和人才培养系统。建立实效落地持续的智慧共享社群。从而全面提升团队的战斗力、执行力、凝聚力以及创新力的众智共享平台。</p>
    </div>



    <div class="comment">
        <p class="comment-title"><img src="{{asset('images/sharepage/comment-icon.png')}}"><span>评论</span></p>
        <div class="comment-list-box"><!--评论列表--></div>
    </div>




        <div style="height:20px"></div>
        <div class="empty">
            <img class="full" src="{{asset('images/sharepage/share-bottom1.png')}}">
        </div>


        <div class="foot">
            <p class="total total-good">
                <img src="{{asset('images/sharepage/zan-before.png')}}" onclick="comment.add_zan()" id="zan-before">
                <img src="{{asset('images/sharepage/zan-after.png')}}" onclick="comment.add_zan()" id="zan-after" style="display:none;">
                <span id="total-good">0</span>
            </p>

            <p class="total total-comment" onclick="comment.show_input()">
                <img src="{{asset('images/sharepage/count.png')}}">
                <span id="total-comment"></span>
            </p>
        </div>


   
        

        <div class="add-comment-page" id="add-comment-page">
            <div class="framework">
                <p class="add-comment-title"><img src="{{asset('images/sharepage/comment-input.png')}}"> <span>评论</span></p>                        
                <textarea name=""  cols="30" rows="10" placeholder="输入评论内容" id="comment-content"></textarea>
                <input class="nickname" type="text" placeholder="昵称" id="comment-user">
                <p class="btn">
                    <span class="cancel" onclick="comment.close_input()">取&nbsp;消</span>
                    <span class="sure" onclick="comment.add_comment()">提&nbsp;交</span>
                </p>

                <a class="foot" href="{{asset('downloadpage.html')}}">
                    <img class="full" src="{{asset('images/sharepage/share-bottom.jpg')}}">
                </a>    
            </div>
        </div>
    </body>
</html>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script>

    var video       = document.getElementById('audio');
    var audioId     = {{$audioInfo->AudioID}};
    var host        = "{{asset('')}}";
    var token       = "{{csrf_token()}}";
    //打开音乐
    function open_music(){
        //开启动画
        $('.audio-box').addClass('open-music');
        //播放音乐
        video.play();
        event.stopPropagation();
    }

    //关闭音乐
    function close_music(){
        //关闭动画
        $('.audio-box').removeClass('open-music');
        video.pause();
    }



    //评论
    var comment = {
        
        show_input : function(){
            $('#add-comment-page').fadeIn();
        },


        close_input : function(){
            $('#add-comment-page').fadeOut();
        },

        add_comment : function(){
            var content = $('#comment-content').val();
            var user    = $('#comment-user').val();
            var userId  = 0;
            var pid     = audioId;
            var type    = "DAY_AUDIO";

                if(content.length < 2){
                    alert('评论内容不能少于两个字');
                    return 
                }


                if($.trim(user).length == 0){
                    alert('请填写姓名');
                    return ;
                }


            var data    = {
                comment:content,
                pid:pid,
                userName:user,
                type:type,
                userId:userId,
                _token:token
            };

                console.log(data);

            $.post({
                url: host + 'webapi/comment/add_comment',
                type:'post',
                data:data,
                success:function(res){
                    comment.close_input();
                    comment.get_comments();

                },faile:function(res){

                }
            })

        },
        get_comments : function(){

            $.post({
                url:host + 'webapi/comment/get_comments',
                data:{pid:audioId,type:'DAY_AUDIO',_token:token},
                success:function(res){
                    var comments = res.data.comments;
                        comment.show_comments(comments);
                }
            })
        },
        show_comments : function(comments){
            var content = "";
            $('#total-comment').html(comments.length);
            for(var com of comments){
                content +=
                '<div class="comment-list">' + 
                    '<div class="head-img">' +
                        '<p style="background-image:url('+"'" + com.head_img +"'"+')"></p>' +
                    '</div>' +
                    '<div class="comment-info">' +
                        '<p class="user-name">'+ com.YourName +'</p>' +
                        '<p class="time-info"><span>'+ com.dateName +'</span><span></span></p>' +
                        '<p class="comment-content">'+ com.description +'</p>' +
                    '</div>' +
                '</div>';
            }
            $('.comment-list-box').html(content);
        },
        get_zan : function(){
            $.post({
                url: host + 'webapi/comment/good_info',
                data:{pid:audioId,type:'DAY_AUDIO',_token:token},
                success:function(res){
                    var data = res.data;
                        $('#total-good').html(data.goodNumber);
                        if(data.isSet){
                            $('#zan-after').show();
                            $('#zan-before').hide();
                        }else{
                            $('#zan-after').hide();
                            $('#zan-before').show();
                        }
                }
            })
        },
        add_zan : function(){
            $.post({
                url:host + 'webapi/comment/set_good',
                data:{pid:audioId,type:'DAY_AUDIO',_token:token},
                success:function(){
                    comment.get_zan();
                }
            })
        }
    }

    comment.get_comments();
    comment.get_zan();

  
    @if(!is_windows())

    window.onload = function(){
        
        var title   = "老侯论道";
        var link    = host + "home/audio_share_to_weixin?audioId={{$audioInfo->AudioID}}";
        var imgUrl  = host + "images/sharepage/bg.png";
        var desc    = "{{$audioInfo->AudioTitle}}";
        var groupTitle = desc + "\n" + title ;
        var musicdata   = "{{$audioInfo->FilePath1}}";
        //var musicdata   =  "http://test.wx.laohoulundao.com/video/testmp3.mp3";
        wx.config(<?php echo $weixinJs->config(array('onMenuShareAppMessage', 'onMenuShareTimeline'), false) ?>);
        wx.ready(function(){
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.onMenuShareTimeline({
                title: groupTitle, // 分享标题
                link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl, // 分享图标
                //type:'music',
                //dataUrl:musicdata,
                success: function () {
                    // 用户确认分享后执行的回调函数

                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            //获取“分享给朋友”按钮点击状态及自定义分享内容接口
            wx.onMenuShareAppMessage({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl, // 分享图标
                //type: 'music', // 分享类型,music、video或link，不填默认为link
                //dataUrl: musicdata, // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                    //alert('ok');
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                    //alert('faile');
                }
            });
        });

    }
    @endif
</script>